<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="wx/include :: header('购物车')"/>
</head>
<body ontouchstart>
<!--主体-->
<header class="wy-header">
    <div class="wy-header-icon-back" onclick="javascript:history.go(-1)"><span></span></div>
    <div class="wy-header-title">购物车</div>
</header>
<div class="weui-content">
    <div class="weui-panel weui-panel_access" th:each="cart : ${carts}">
        <input type="hidden" id="cartId" th:value="${cart.cartId}">
        <div class="weui-panel__bd">
<!--            <div class="weui-media-box_appmsg pd-10">-->
<!--                <label class="checkbox-inline">-->
<!--                    <input type="checkbox" id="cartItem" value="option1">-->
<!--                </label>-->
<!--            </div>-->
            <div class="weui-media-box_appmsg pd-10">
                <div class="weui-media-box__hd check-w weui-cells_checkbox">
                    <label class="weui-check__label">
                        <div class="weui-cell__hd cat-check">
                            <input type="checkbox" class="weui-check" name="cartpro" th:value="${cart.cartId}"  th:attr="price=${cart.goods.price}">
                            <i class="weui-icon-checked"></i>
                        </div>
                    </label>
                </div>
                <div class="weui-media-box__hd">
                    <a th:href="${'/wx/pro_info/' + cart.goods.goodsId}">
                        <img class="weui-media-box__thumb" th:src="${cart.goods.mainImage}" alt="">
                    </a>
                </div>
                <div class="weui-media-box__bd">
                    <h1 class="weui-media-box__desc">
                        <a th:href="${'/wx/pro_info/' + cart.goods.goodsId}" class="ord-pro-link"
                           th:text="${cart.goods.goodsName}"></a>
                    </h1>
                    <div class="clear mg-t-10">
                        <div class="wy-pro-pri fl">¥<em class="num font-15" th:text="${cart.goods.price}"></em></div>
                        <div class="pro-amount fr">
                            <a href="javascript:;" class="wy-dele" style="margin-left: 30px;" th:attr="cartId=${cart.cartId}"></a>
                            <!--<div class="Spinner"></div>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--底部导航-->
<div class="foot-black"></div>
<div class="weui-tabbar wy-foot-menu" style="margin-bottom: 48px">
    <div class="npd cart-foot-check-item weui-cells_checkbox allselect">
        <label class="weui-cell allsec-well weui-check__label" for="all">
            <div class="weui-cell__hd">
                <input type="checkbox" class="weui-check" name="all-sec" id="all">
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p class="font-14">全选</p>
            </div>
        </label>
    </div>
    <div class="weui-tabbar__item  npd">
        <p class="cart-total-txt">合计：<i>￥</i><em class="num font-16" id="zong1"></em></p>
    </div>
    <a href="javascript:;" onclick="settle()" class="weui-tabbar__item red-color npd">
        <p class="promotion-foot-menu-label">去结算</p>
    </a>
</div>
<th:block th:include="wx/include :: foot-black" />
<th:block th:include="wx/include :: footer"/>
<script type="text/javascript">
    $(function () {
        loadTotal();
    });

    $("input[name=cartpro]").on('change', function(){
        loadTotal();
    });

    $(".allselect").click(function () {
        if ($(this).find("input[name=all-sec]").prop("checked")) {
            $("input[name=cartpro]").each(function () {
                $(this).prop("checked", true);
            });
        } else {
            $("input[name=cartpro]").each(function () {
                if ($(this).prop("checked")) {
                    $(this).prop("checked", false);
                } else {
                    $(this).prop("checked", true);
                }
            });
        }
        loadTotal();
    });

    function loadTotal(){
        var total = 0;
        $("input[name=cartpro]").each(function () {
            if ($(this).prop("checked")) {
                total += Number($(this).attr('price'));
            }
        });
        $('#zong1').html(total);
    }

    $(document).on("click", ".wy-dele", function () {
        var cartId = $(this).attr('cartId');
        $.confirm("您确定要把此商品从购物车删除吗?", "确认删除?", function () {
            $.post('/wx/cart/del/' + cartId, function (resp) {
                window.location.reload();
            });
        }, function () {
            //取消操作
        });
    });

    function settle() {
        var result = [];
        $("input[name='cartpro']").each(function(){
            if(this.checked){
                result.push($(this).val());
            }
        });
        if(result.length === 0){
            $.alert('请选择您要购买的商品！');
        }else{
            $.post('/wx/order/submit', {cartIds: result.join(',')}, function (resp) {
                if (resp.code === 0) {
                    window.location.href = "/wx/order_info/" + resp.data;
                } else {
                    $.alert(resp.msg);
                }
            });
        }
    }
</script>
</body>
</html>
